Building Our First React App!

Firat Atalay

12 min read

·

Nov 9, 2023

Now, before learning anything about React and even before setting up our development environment, let’s build our very first small React app. It’s a tiny app, but you will already meet many of the fundamental ingredients that all React applications are built upon. So this is gonna be a lot of fun already.

And so let’s get started. And remember how I said that we don’t even need to set up our development environment? And that’s right. We can actually write our very first React app right here in basically this online code editor called codesandbox.io. So right now you can go to codesandbox.io. And there, they will ask you to try this app for free, but you can do it even more easily, which is to open up a new tab and simply write react.new. So that’s it, react.new. Hit Enter. And this will then automatically create a brand-new CodeSandbox for you already with the React starter template.

So here, on the left side, you’ll have some files. Here’s some info about the template that doesn’t really matter. Then in the middle, you will have a code editor, where you can open these files. So just like VS Code. And on the right, you will have your output and even your console down here. So this is, again, just like VS Code. And in fact, this whole app is actually really built on VS Code. And this is actually so helpful and useful that we will use CodeSandbox a lot of times throughout this course.

But anyway, you see here that it has already created a bunch of folders and files for us. And let’s start by deleting the styles.css. We’re not going to use this. And we have this index.js and app.js. And of course, later, we will learn what all of this code here is and does. But for now, let’s open up simply app.js and delete everything.

And so with this, we can then start from scratch. So let’s start by building our very first React component, which is essentially a piece of the user interface. Again, more about all that later. So just write function. And by default, we call our main component the App component. And as you see, a component in React is really just a function. Now, these functions in React, so these components, can return something called JSX, which is a syntax that looks like HTML and which will basically describe what we can see on the screen. So just like HTML.

So let’s return a div. Let’s close it here. Then let’s, for example, write an h1 here. Hello World! So that’s the traditional first line of code that we always write. And then we also will want a button a bit later. And here, let’s say, “Get advice,” because we are going to build a very small app, which will fetch some advice from an API and will display it over here on the screen. So let’s give this a save. And you see that it all nicely formats here, which is because behind the scenes here, we have the Prettier extension already included into the starter template here. And now all we need to do is to export this function from here because you see that this index.js file actually imports it here. So export default, give it a save, and then let’s just manually reload here on the right side. And after some time, you should then, yeah, so you should see your “Hello World!” and the button.

Beautiful. So that’s our very first React component. But of course, nothing happens, for example, when I click here on this button. And so let’s change that. And again, what I want to do is whenever I click on this button, we want to get a new advice from an API. So basically, we want to fetch some data from an API and display it on our user interface.

So let’s actually write a new function right in here. So inside App, we will write an async function so that we can use async/await. And so you should be familiar with this basic JavaScript. And if not, don’t worry. There is actually a section that reviews the most essential JavaScript that you need to know for React. Now here, I’m missing, of course, the function name. So let’s say getAdvice. And then here, let’s fire off a fetch request. And here, I’m just going to type out the URL of this API. So https, then api.adviceslip.com/advice. Okay?

Then we can await this promise and store it inside of some variable. And again, all of this should be nothing new for you at this point. Let’s just give ourselves a little bit more space. But also, as I said, if this is new stuff, just type out the JavaScript that I’m writing here, and it all will make sense in that review of essential JavaScript. But anyway, let’s now basically convert that response to JSON, and then let’s log it to the console. All right. So inside our component, which again is this App function here. So inside that component, we now have this getAdvice function. But we’re not calling it anywhere, right?

So how do we call this function when we click on this button? Well, we can specify the onClick attribute here. So onClick equals and then just open these curly braces. And here, we simply write getAdvice. All right. Let’s maybe reload, just to make sure. And then let’s click. And, well, we got something.

Nice. So here we have this slip, then slip again, and then in there we have the advice. And so here we have some piece of advice: A problem shared is a problem halved. So what we’re looking for is actually data.slip.advice, right? So let’s try that again. Yeah. So now you get this advice directly here.

And all we have to do now is to basically get this string. So this text here into our user interface. So we want it to be displayed right here. So here in this place. Now, how do we do that?

Well, for that we need a concept called state. And state is the most fundamental concept of React. So whenever we need something to change in the user interface, we change the state. So we update something that we call state.

So to create a new state, we need to do it here at the top level in the function, and we write it like this. So advice and setAdvice and then useState. And we start off with an empty string. So you see that, automatically, useState got imported from the React library. And if, for you, this didn’t happen automatically, then please go ahead and write this line of code here. All right.

So this useState here is a function in React, which returns an array. And so here, we are destructuring that array. So in the first position of the array, we have the value of the state that we call advice here. And the second value is a setter function. So a function that we can use to update the piece of state. Okay? And so right here, in this getAdvice function, we can now use this setAdvice function to update the state. And then whenever this piece of state is updated, the user interface will also be updated.

So let’s call setAdvice right here. So after we receive the data. And now all we have to do is to then use this advice right here in this JSX. So remember that I said that this is called JSX, which is basically just like HTML, but we can add some JavaScript to it as well. So each time we want some JavaScript, we can basically enter JavaScript mode by using these curly braces. And we already did that down here. So we have this onClick attribute here. And then here, we opened JavaScript and passed in the function. So this function will then get called whenever we click this button. So here, now we can simply place this advice variable. And then let’s see the magic happening.

And it works. Beautiful. Let’s click again. And then we get another one. Beautiful. So it’s already working. So this is already your first working React application, already with a piece of state, which, again, is one of the fundamental aspects of React. And of course, right now all of this seems really confusing, but of course, you will understand it as we go through the course.

So basically, what happens is we click this button here, and we said here that whenever we click the button, the getAdvice function should be called. And so then, indeed, it gets called, it fetches our data, and then we update the state. So we update the state by calling setAdvice. And then whenever we do that, so when we update state, then this function here, so this whole component, is executed again, and then the advice here has been changed. And therefore, it then changes here on the user interface.

Nice. So what I want to do next is to display down here some text, which tells us how many times, basically, we have clicked this button. So which tells us how many pieces of advice we have already read. So basically, we want a paragraph here, which says something like, “You have read.” Then here, we can write any HTML. Like, we can make it strong. Let’s, for now, just use some placeholder value here. Pieces of advice. And let’s close that here. But now, of course, we want to make this number dynamic, right?

And so this is another place where we need some state because we want this value here to be updated over time. So we create more state. So useState again. And now the initial value should be zero. And then, again, this returns an array, which we can immediately destructure into, for example, count and setCount. And of course, we can use any names that we want here. So what we do then here is to also update the count. So we can use our setCount function. And then here, I will do something a bit strange. So we will update now in a different way, but this doesn’t really matter. So it simply takes the current count and then adds one, and that will become the new count. Okay?

And now here, let’s replace that placeholder with the actual count value. And if we reload now, then, yeah, it increased. And it keeps increasing. So that works just fine. Nice.

Now, maybe you noticed that when we load this for the first time, we have no advice here at all, and of course, we start at zero. So let’s change that so that whenever we open up the app for the first time, we already are greeted here with our very first piece of advice. And we can do that with something called an effect. So we can use useEffect. And again, it needs to be imported here. So make sure that useEffect is up here. And then into useEffect, we pass a function.

So what do we want to happen here? Well, basically, exactly the same thing as here. So we can simply call getAdvice. Right? Now, you’re seeing that it’s getting completely out of control, and that’s because we have a bug in our code. So here, we need this empty array. And as soon as I save this, you see that it stopped.

So useEffect takes two arguments. First, a function that we want to get executed at the beginning. So when this component first gets loaded, basically. And then a second argument, which is called the dependency array. But that doesn’t matter for now. So we will learn all about this later, but for now, just make sure that you have this empty array here now. All right?

And if we reload now, you see that very soon you get this very first advice automatically. Now, down here, we also get two pieces of advice, even though it should be only one. But again, we will worry about that later. This is just because of something called strict mode in development.

Now, if we keep clicking, then, of course, it keeps increasing normally. But when we load for the first time, basically, this effect will be executed twice. And so then this increases two times. Nice. And this is actually all the functionality that I wanted already for this little application.

To make it just a little bit more real world, so to say, let’s create a new component for this message down here. So in React, we try to divide user interfaces into components. And so let’s kind of do this already here. So let’s call this component Message. And notice how it is uppercase here. So just like App, this one also needs to be uppercase. That’s a convention in React for all components. So here, all we want to return is basically just this. So we cut it from here, and then here, we simply include Message.

Now, you see that we have this error there, but we will take care of that in a minute. And so now, we can basically include this component, so actually, message, just as if it was another HTML element. So Message, and then we can close it immediately like this. But now we have a problem because here, we are using this count value. And, well, right now this component has no way of knowing about the value of this variable. And so what we need to do is to pass it right into the component.

So we do that using something called props. And the prop is basically just like parameters to a function. So let’s say we wanted to call this prop count, and then we pass in the count value. And again, here we are entering this JavaScript mode by using the curly braces. And so now here, we can accept that, but not like this. So it’s not like a normal function where we simply accept count. Instead, what we accept is an object called props. And it’s on this props object that count is now a property.

And again, if this sounds too confusing, well, it is actually pretty simple, as you will see when we learn this all step by step and not all at once. So here, I just want us to have a little bit of fun and very briefly get to know all these different ingredients of React. But you don’t need to worry about learning any of this right now. Just type the code and have some fun and, yeah, see the application here coming together. So now it actually works. So if we reload, then all these errors will be gone, and the application is back to working. So beautiful.

And actually, this is all that I wanted to do for this small application, which still already has a lot of the React ingredients that real-world React applications will have.

So we have state, we have effects, we have props, we have, of course, JSX here. We created two components. And so that’s already pretty nice. So I hope that this was fun and that you also got this application to work. And with that being said, after this small introduction, it’s now time to actually set up our system a little bit and really start learning about what React actually is, why it exists, and yeah, start learning really React.